<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="p" uri="/WEB-INF/portal.tld" %>
<%@ taglib prefix="portal" uri="/WEB-INF/portal.tld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <%@ include file="/common/plateform/include/common-base.jsp"%>
  <title>${titleName}|系统注册</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

  <!-- top start -->
  <%@include file="/common/plateform/top.jsp" %>
  <!-- top end -->
  <!-- left start -->
  <%@include file="/common/plateform/left.jsp" %>
  <!-- left end-->

  <div class="content-wrapper">
    <!-- Main start -->
	<section class="content">
      <div class="row">
        <div class="col-xs-12">
        
          <!------搜索  start ------->
          <div class="box box-info">
             <!--搜索title  start --> 
            <!--搜索title  end -->
            <div class="box-body">
			  <form id="searchFrom" class="form-horizontal">
				<input type="hidden" name="doCode" class="clean" value="listProtocol"/>
				<div class="form-group">
					<div class="col-sm-4">
						<button  onclick="toAdds();" class="btn btn-success" type="button"><i class="fa fa-plus-circle"></i> &nbsp;创建系统工程 </button>
					</div>
					<div class="col-sm-4"></div>
					<div class="input-group col-sm-4">
						<input class="form-control" name="sysEname" maxlength="50" placeholder="您可以输入系统标识进行筛选"/>
						<div class="input-group-addon fcur" onclick="getTableDatas();">
							<i class="fa fa-search text-info"></i>
						</div>
					</div>
				</div>
			  </form>
            </div>
	     </div>
			<div class="hidden">
				<style>
					.list-unstyled li{
						height: 120px;
					}
				</style>
				<ul class="list-unstyled clearfix"><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #222;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Black</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Purple</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Green</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover" data-skin="skin-blue"><div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Blue</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Red</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin">Yellow</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Blue Light</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Black Light</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Purple Light</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Green Light</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin" style="font-size: 12px">Red Light</p></li><li style="float:left; width: 33.33333%; padding: 5px;"><a href="javascript:void(0);" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover"><div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div></a><p class="text-center no-margin" style="font-size: 12px;">Yellow Light</p></li></ul>
			</div>
			<!------- 搜索 end -------->
        <!------- 列表 start -------->
          <div class="box box-success">
              <div class="box-body">
                <table id="dataList" class="table table-bordered table-hover" >
                <thead class="bg-success">
                <tr>
                  <th>系统名称</th><th>系统标识</th><th>排序</th>
                  <th>创建时间</th><th>创建人</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody id="dataList-body">
                </tbody>
              </table>
              <center>
    	  		<ul id="dataList-page"></ul>
              </center>
            </div>
           </div>
        <!------- 列表 end -------->
        </div>
      </div>
    </section>
    <!-- Main end -->
    
   <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">
							<font color="red">信息添加/修改</font>&nbsp;
						</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" id="submitForm">
							<input type="hidden" class="clean" name="doCode" value="saveProtocol"/>
							<input type="hidden" class="clean" id="sysId" data-name="sysId" name="sysId"  value=""/>
							<input type="hidden" class="clean" id="formToken" name="formToken"  value="${formToken}" />
					        <div class="box-body" id="submitFormData">
					          <div>
					            <div class="tab-content">
					              <div class="tab-pane active" id="tab_1">
					                <div class="form-group">
					                  <label class="col-sm-3 control-label" >系统名称</label>
					                  <div class="col-sm-8">
					                    <input type="text" id="sysCname" data-name="sysCname" name="sysCname" class="form-control clean"  placeholder="必填项，中文名称"/>
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label class="col-sm-3 control-label" >系统标识</label>
					                  <div class="col-sm-8">
					                  <input id="sysEname" name="sysEname" data-name="sysEname" class="form-control clean"  placeholder="必填项，英文小写"/>
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label class="col-sm-3 control-label" >系统域名</label>
					                  <div class="col-sm-8">
					                  	<input id="methodName" name="delStatus" data-name="delStatus" class="form-control clean" />
					                  </div>
					                </div>
					                
					                <div class="form-group">
					                  <label class="col-sm-3 control-label" >排序值</label>
					                  <div class="col-sm-8">
					                  <input id="orderNum" name="orderNum" data-name="orderNum" class="form-control clean"  />
					                  </div>
					                </div>
					                
					                <div class="form-group">
					                  <label class="col-sm-3 control-label" >管理后台主题</label>
					                  <div class="col-sm-8">
					                  	<select name="sysColor" data-name="sysColor" class="form-control clean">
					                  		<option value="">--请选择--</option>
					                  		<option value="skin-blue">蓝色（skin-blue）</option>
					                  		<option value="skin-purple">紫色（skin-purple）</option>
					                  		<option value="skin-green">绿色（skin-green）</option>
					                  		<option value="skin-red">红色（skin-red）</option>
					                  		<option value="skin-yellow">黄色（skin-yellow）</option>
					                  		<option value="skin-blue-light">蓝白色（skin-blue-light）</option>
					                  		<option value="skin-green-light">绿白色（skin-green-light）</option>
					                  		<option value="skin-red-light">红白色（skin-red-light）</option>
					                  		<option value="skin-yellow-light">黃白色（skin-yellow-light）</option>
					                  	</select>
					                  </div>
					                </div>
									  <div class="form-group">
										  <label class="col-sm-3 control-label" >含用户中心</label>
										  <div class="col-sm-8">
											  <input type="hidden" id="input_user_center_flag" name="userCenterFlag" data-name="userCenterFlag" value="T"/>
											  <input type="radio" value="T" name="radio_userCenterFlag"  onclick="checkIsUserCenter('T','input_user_center_flag')"  checked/> 是
											  <input type="radio" value="F" name="radio_userCenterFlag"  onclick="checkIsUserCenter('F','input_user_center_flag')" /> 否
										  </div>
									  </div>
									  <div class="form-group" id="div_userCenter">
										  <label class="col-sm-3 control-label" >用户中心主题</label>
										  <div class="col-sm-8">
											  <select name="userCenterColor" data-name="userCenterColor" class="form-control clean">
												  <option value="">--请选择--</option>
												  <option value="skin-blue-light">蓝白色（skin-blue-light）</option>
												  <option value="skin-green-light">绿白色（skin-green-light）</option>
												  <option value="skin-red-light">红白色（skin-red-light）</option>
												  <option value="skin-yellow-light">黃白色（skin-yellow-light）</option>
											  </select>
										  </div>
									  </div>
					                
					                <div class="form-group">
					                  <label class="col-sm-3 control-label" >系统描述</label>
					                  <div class="col-sm-8">
					                  <textarea rows="3" cols="9" id="sysRemark" name="sysRemark" data-name="sysRemark"  class="form-control clean"></textarea>
					                  </div>
					                </div>
					              </div>					             
					              <!-- /.tab-pane -->
					            </div>
					            <!-- /.tab-content -->
					          </div>
					          <!-- nav-tabs-custom -->
					        </div>
			                <div class="box-footer">
				                <button type="button" class="btn btn-success pull-left" onclick="cannel();">取消</button>
				                <button type="button" class="btn btn-danger pull-right" onclick="saveItem('submitForm');">提 交</button>
				            </div>
						</form>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>		
</div>  
    
 <script type="text/template" id="dataList-template">
		<? for ( var i = 0; i < rows.length; i++) {?>
			<tr>
				<td style="display:none;"><?=rows[i].sysId?></td>
				<td><a href="${ctx}/sendPage/<?=rows[i].sysEname?>/admin/index" target="_bank"> <i class="fa fa-compass fx1"></i></a> <?=rows[i].sysCname?></td>
				<td><?=rows[i].sysEname?></td>
				<td><?=rows[i].orderNum?></td>
				<td><?=getFormatDateByLong(rows[i].createTime,"yyyy-MM-dd hh:mm:ss")?></td>
				<td><?=rows[i].createUser?></td>
				<td>
					<button type="button" class="btn btn-warning btn-xs" onclick="toLoad('<?=rows[i].sysId?>','edit');">修改</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-danger btn-xs" onclick="createProject('<?=rows[i].sysEname?>','<?=rows[i].sysCname?>','<?=rows[i].sysColor?>','<?=rows[i].userCenterFlag?>','<?=rows[i].userCenterColor?>');">创建工程</button>
				</td>
			</tr>
		<?}?>
</script>   
    
 <script>
var clickMenu = "sys-list";

myPage = 10;
searchFormId = "searchFrom";
tableId = "sysId";
isShowLog = true;
dataListId="dataList";
$(function () {
	//1、加载分页列表数据
	getTableDatas();
 });
 

//读取（查询、编辑）数据
function toLoad(id,type){
	$.ajax({ type:'get', url:"${ctx}/trans/info/sysInfo",dataType:'json',
	    data:{'sysId':id},
	    success: function(myData){
	    	 //console.log(myData);
	    	//$("#fileUpText_2_showImg").attr("src","");
	    	showData(type,myData);
	  	}
	});	
}

function toAdds(){
	mytools.cleanData(".form-horizontal");
	$("#my_modal").modal("show");
}
function checkIsUserCenter(f,inputId){
    $("#div_userCenter").find("select").val("");
    if("T"==f){
        $("#div_userCenter").removeClass("hidden");
	}else{
        $("#div_userCenter").addClass("hidden");
	}
	$("#"+inputId).val(f);
}
//反显数据
function showData(type,myData){
	console.log(myData);
	mytools.cleanData('.form-horizontal');
	FormUtil.loadView("", myData);
	//alert(myData.sysUrl);
	if("view"==type){
		$("#my_modal_view").modal("show");
	}else if("edit"==type){
		$("#my_modal").modal("show");
		$("#fileUpText_2_showImg").attr("src",myData.sysUrl);
		if(strUtil.isNull(myData.userCenterFlag)){
            $("input[type='radio'][name='radio_userCenterFlag'][value='F']").prop("checked", true);
		}else{
            $("input[type='radio'][name='radio_userCenterFlag'][value='T']").prop("checked", true);
        }
		//alert($("#fileUpText_2_showImg")[0].src);
	}
}

function saveItem(formId){
    var index_submit = layer.confirm('您确定要提交数据吗？', {btn: ['Yes','No'],closeBtn: 0,offset: '220px'}
        , function() {
            layer.close(index_submit);
            $.ajax({
                type:'post',
                url:"${ctx}/trans/submit/saveSys",
                data:$("#"+formId).serialize(),
                dataType:'json',
                success: function(myData){
                    layer.alert(myData.msg, {icon: 1,closeBtn: 0,offset: '220px'});
                    if(myData.flag=='T'){
                        getTableDatas();
                        layer.alert("操作成功", {icon: 1,closeBtn: 0,offset: '220px'});
                        $("#my_modal").modal('hide');
                    }else{
                        layer.alert(myData.msg, {icon: 1,closeBtn: 0,offset: '220px'});
                    }
                }
            });
        });
}

function getTableDatas(){
	deleteAllRow(dataListId);
	$.ajax({ type:'get', url:"${ctx}/trans/list/listSys",dataType:'json',
		   data:$("#"+searchFormId).serialize()+getCurrentPage("${ctx}/trans/list/listSys?"+$("#"+searchFormId).serialize(),myPage),
		   success: function(myData){
		   console.log(myData);
			var data = baidu.template(dataListId+"-template",eval(myData));  
			$("#"+dataListId+"-body").html(data);
			  var option= {
					   ele:$("#"+dataListId+"-page")[0],
					   total:myData.total,
					   fn:getTableDatas,
					   url:"${ctx}/trans/list/listSys"+"?"+$("#"+searchFormId).serialize()
				   };
				generatePages(option);
		   }
		});	
  }
function createProject(sysEname,sysCname,sysColor,userCenterFlag,userCenterColor){
	var index_submit = layer.confirm('请谨慎操作！！！', {btn: ['确认继续','放弃'],closeBtn: 0,offset: '220px'}
	, function(){
		layer.close(index_submit);
		$.ajax({ type:'post', url:"${ctx}/common/coding/createProject",dataType:'json',
			   data:{"sysEname":sysEname,"sysCname":sysCname,"sysColor":sysColor,"userCenterFlag":userCenterFlag,"userCenterColor":userCenterColor},
			   success: function(myData){
			   	   layer.alert(myData.msg);
			   }
		});
	});
}
</script>
<script src="${ctx}/js/tools-obj.js"></script>   
    
    
    
    
    
  </div>
  <!-- /.content-wrapper -->
  <!-- foot start -->
  <%@include file="/common/plateform/foot.jsp" %>
  <!-- foot start -->
  


 
</body>
	


</html>
